/* eslint-disable semi */
/* eslint-disable no-unused-vars */
/* eslint-disable implicit-arrow-linebreak */
import { useEffect, useState } from 'react'
import DataTable from 'react-data-table-component'
import { ChevronDown } from 'react-feather'
import { useDispatch, useSelector } from 'react-redux'
import { Col, ListGroup, Row } from 'reactstrap'
import {
  getAllClientDocumentsAction,
  registerClientDocumentsAction
} from '../../../redux/document/documentsAction'
import FileUploaderMultiple from '../../fileUploader/FileUploaderMultiple'
import CustomSpinner from '../../spinner/Spinner'
import { columns } from './table.data'
const customStyles = {
  headCells: {
    style: {
      backgroundColor: '#faf6ed',
      borderRight: '1px solid #f1f0ed'
    }
  },
  cells: {
    style: {
      borderRight: '1px solid #f1f0ed',
      borderBottom: '1px solid #f1f0ed'
    }
  }
}
const ListGroupIcons = () => {
  //**  get client ID */
  const id = useSelector((state) => state?.auth?.user?.user_id)

  const dispatch = useDispatch()
  const [files, setFiles] = useState([])
  const { getAllDocuments, loading, registerLoading } = useSelector(
    (state) => state.document
  )
  const rows = getAllDocuments?.data
  useEffect(() => {
    let isMounted = true
    if (isMounted) dispatch(getAllClientDocumentsAction())
    return () => (isMounted = false)
  }, [])

  const handleSubmit = () => {
    const document = new FormData()
    {
      files.map((file) => document.append('file', file))
    }
    document.append('client', id)

    dispatch(
      registerClientDocumentsAction({
        data: document,
        callback: () => setFiles([])
      })
    )
  }
  return (
    <>
      {loading ? (
        <CustomSpinner />
      ) : (
        <ListGroup>
          {/* <div>
            <p className="pt-2 p-x-3">No Pending Documents At this Time</p>
          </div> */}
          <div className="react-dataTable">
            <DataTable
              data={rows}
              pointerOnHover
              customStyles={customStyles}
              highlightOnHover
              theme="solarized"
              columns={columns}
              className="react-dataTable"
              sortIcon={<ChevronDown size={10} />}
            />
          </div>

          {/* File Uploader  */}
          <div className="completed-document fw-800 black  mt-3">
            Other Files
          </div>

          <Row>
            <Col lg="6">
              <FileUploaderMultiple
                client={true}
                files={files}
                setFiles={setFiles}
                loading={registerLoading}
                submit={handleSubmit}
              />
            </Col>
          </Row>
        </ListGroup>
      )}
    </>
  )
}

export default ListGroupIcons
